<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { incrementNumberComputed } from '../../utils';
// 数据格式
interface IData {
  // 名称
  title: string
  // 数量
  count: number
}
interface IDetail {
  // 名称
  name: string
  // 地址
  address: string
}

const active = ref(0)
const handleClick = (data: number) => {
  active.value = data
}

const data = ref<IData[][]>([])
const detail = ref<IDetail[]>([])
const detailType = ref<string>('')

const showData = computed(() => data.value?.[active.value] || [])

onMounted(() => {
  // 接口回来
  data.value = [
    [{title: '5G-A', count: 28}, {title: 'RemoteID', count: 3},{title: 'TDOA', count: 3},{title: '雷达', count: 1},{title: '光电设备', count: 21}],
    [{title: '5G-A', count: 20}, {title: 'RemoteID', count: 3},{title: 'TDOA', count: 2},{title: '雷达', count: 1},{title: '光电设备', count: 18}],
  ].map((item) => item.map((item) => {
    return {
      ...item,
      count: incrementNumberComputed(item.count, 1000),
    }
  }) as any)
})

const detailShow = ref(false)

const handleDetail = (_data: IData) => {
  detailType.value = _data.title
  detailShow.value = true
  detail.value = [
    {name: '松雅湖南侧星沙驿站2楼顶', address: '松雅湖南侧星沙驿站'},
    {name: '松雅湖南侧星沙驿站2楼顶', address: '松雅湖南侧星沙驿站'},
    {name: '松雅湖南侧星沙驿站2楼顶', address: '松雅湖南侧星沙驿站'},
    {name: '松雅湖南侧星沙驿站2楼顶', address: '松雅湖南侧星沙驿站'},
    {name: '松雅湖南侧星沙驿站2楼顶', address: '松雅湖南侧星沙驿站'},
  ]
}

const closeDetail = () => {
  detailShow.value = false
}
</script>

<template>
  <div class="detect">
    <div :class="{
      'detect-header': true,
      'detect-header-hide': detailShow
    }"></div>
    <div :class="{
      'detect-content': true,
      'detect-content-hide': detailShow
    }">
      <div class="detect-content-tab">
        <div :class="{
          'detect-content-tab-item': true,
          'detect-content-tab-item-active': active === 0
        }" @click="handleClick(0)">
          注册
        </div>
        <div :class="{
          'detect-content-tab-item': true,
          'detect-content-tab-item-active': active === 1
        }" @click="handleClick(1)">
          在线
        </div>
      </div>
      <div class="detect-content-data">
        <div class="detect-content-data-item" v-for="item in showData" :key="item.title" @click="handleDetail(item)">
          <div class="detect-content-data-item-title">{{ item.title }}</div>
          <div class="detect-content-data-item-count">{{ item.count }}<span>个</span></div>
        </div>
      </div>
    </div>

    <!-- 详情 -->
     <div :class="{'detect-detail': true, 'detect-detail-show': detailShow}">
      <div :class="{
        'detect-detail-header': true,
        'detect-detail-header-radar': detailType === '雷达',
        'detect-detail-header-tdoa': detailType === 'TDOA',
        'detect-detail-header-remoteid': detailType === 'RemoteID',
        'detect-detail-header-photoelectric': detailType === '光电设备',
        'detect-detail-header-5g-a': detailType === '5G-A',
      }">
        <span @click="closeDetail"></span>
      </div>
      <div class="detect-detail-content hidden-scrollbar">
        <div v-for="(item, index) in detail" :key="index" class="detect-detail-content-item">
          <div class="detect-detail-content-item-title">设备名称：{{ item.name }}</div>
          <div class="detect-detail-content-item-address">设备地址：{{ item.address }}</div>
        </div>
      </div>
     </div>
  </div>
</template>

<style lang="scss" scoped>
.detect {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);
  // overflow: hidden;

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    margin-bottom: 6px;
    background-image: url('@/assets/facility/detect-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    &-hide {
      opacity: 0;
    }
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 348px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &-hide {
      opacity: 0;
    }

    &-tab {
      height: 30px;
      margin: 10px 0;

      &-item {
        display: inline-block;
        width: 144px;
        height: 30px;
        background: linear-gradient(90deg, rgba(7, 47, 95, 0.3) 5%, rgba(7, 47, 95, 0.3) 99%);
        box-sizing: border-box;
        /* 蓝色-渐变 */
        border: 1px solid;
        border-image: linear-gradient(0deg, #A0D2E9 6%, #A1D3EB 100%) 1;
        font-family: Source Han Sans CN;
        font-size: 16px;
        font-weight: normal;
        line-height: 30px;
        text-align: center;
        letter-spacing: normal;
        /* 文字颜色/主标题&一级标题 */
        color: #FFFFFF;
        cursor: pointer;

        &-active {
          background: rgba(28, 115, 226, 0.6);
        }
      }
    }

    &-data {
      position: relative;
      width: 100%;
      flex: 1;
      background-image: url('@/assets/facility/detect/device.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      &-item {
        position: absolute;
        width: 33.33%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        cursor: pointer;

        &:nth-child(1) {
          top: 44px;
          left: 15%;
        }
        &:nth-child(2) {
          top: 44px;
          right: 15%;
        }
        &:nth-child(3) {
          bottom: 34px;
          left: 6px;
        }
        &:nth-child(4) {
          bottom: 34px;
          left: 50%;
          transform: translateX(-50%);
        }
        &:nth-child(5) {
          bottom: 34px;
          right: 6px;
        }

        &-title {
          font-family: Source Han Sans;
          font-size: 18px;
          font-weight: bold;
          line-height: 16.05px;
          text-align: center;
          letter-spacing: normal;
          color: #FFFFFF;
          margin-bottom: 5px;
        }

        &-count {
          font-family: YouSheBiaoTiHei;
          font-size: 14px;
          font-weight: normal;
          line-height: 47px;
          text-align: center;
          display: flex;
          align-items: center;
          letter-spacing: normal;
          color: #FFFFFF;
          /* 28 */ 
          font-family: YouSheBiaoTiHei; 
          font-weight: 400; 
          font-size: 32px;
          font-variation-settings: "opsz" auto;

          span {
            margin-left: 4px;
            font-family: Impact; 
            font-weight: 400; 
            font-size: 14px;
            font-variation-settings: "opsz" auto;
          }
        }
      }
    }
  }

  // 详情
  &-detail {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;

    &-show {
      transform: translateX(0);
    }

    &-header {
      position: relative;
      width: 100%;
      height: 74px;
      margin-top: -38px;
      margin-bottom: 6px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      &-remoteid {
        background-image: url('@/assets/facility/RemoteID-header.svg');
      }

      &-5g-a {
        background-image: url('@/assets/facility/5G-A-header.svg');
      }

      &-radar {
        background-image: url('@/assets/facility/radar-header.svg');
      }

      &-tdoa {
        background-image: url('@/assets/facility/tdoa-header.svg');
      }

      &-photoelectric {
        background-image: url('@/assets/facility/photoelectric-header.svg');
      }

      span {
        position: absolute;
        top: 38px;
        right: 30px;
        display: block;
        width: 36px;
        height: 36px;
        cursor: pointer;
      }
    }

    &-content {
      box-sizing: border-box;
      width: 100%;
      height: 348px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow-y: scroll;

      &-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 6px 10px;
        border-radius: 4px;
        background: rgba(7, 47, 95, 0.3);
        border: 1px solid;
        border-image: linear-gradient(103deg, #0AB0FE 26%, rgba(10, 176, 254, 0.4) 94%) 1;
        margin-bottom: 8px;
        user-select: none;
        cursor: pointer;

        &:last-child {
          margin-bottom: 0;
        }

        &-title {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: normal;
          color: #FFFFFF;
          text-align: left;
        }

        &-address {
          font-family: Source Han Sans;
          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: normal;
          color: rgba(255, 255, 255, 0.6);
          text-align: left;
        }
      }
    }
  }
}
</style>
